import { ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Modal } from 'antd';
import { FormInstance } from 'antd/lib/form/Form';
import { useRef } from 'react';
import { getTenantRoleList } from '@/pages/Auth/AuthRole/service';
import { TenantChangeRoleBean, TenantItem } from '../data';

interface UpdateTenantRoleProps {
  tenant: TenantItem;
  onSubmit: (values: TenantChangeRoleBean) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  visibleHandler: (flag?: boolean) => void;
}

export default (props: UpdateTenantRoleProps) => {
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    tenant
  } = props;
  const formRef = useRef<FormInstance>();

  return (
    <Modal
      title="修改客户角色"
      open={updateModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
    >
      <ProForm<TenantChangeRoleBean>
        onFinish={(values) => handleUpdate(values)}
        formRef={formRef}
        layout="vertical"
      >

        <ProFormText
          width={'xl'}
          name="tenant_id"
          label="id"
          initialValue={tenant.id}
          hidden={true}
        />

        <ProFormSelect
          label={'角色'}
          showSearch
          name="role_id"
          params={{ page: 1, pageSize: 10 }}
          request={async (_params, _props) => {
            const res: any = await getTenantRoleList();
            if (res)
              return res.data.map((item: { id: any; name: any }, _index: any) => {
                return {
                  value: item.id,
                  label: item.name,
                };
              });
          }}
          rules={[{ required: true, message: '请选择角色' }]}
          placeholder="请选择角色"
          initialValue={tenant.role_id}
        />


      </ProForm>
    </Modal>
  );
};
